<template>
  <div class="case">
    <banner title="精选案例" />
    <div class="case-section">
      <div class="case-section-content">
        <div class="case-section-content-list animate__animated"
        :class="[index%2==0?'wow animate__bounceInRight':'wow animate__bounceInLeft']" v-for="(cas,index) in newcaseList" :key="index">
          <div class="interval">
            <!-- <div class="jgx"></div> -->
            <el-divider content-position="center">
              <i class="el-icon-mobile-phone"></i>
            </el-divider>
          </div>
          <router-link
            class="imggoin"
            :to="{ name: 'casedetails', params: { id: index }}"
          >
            <img  v-lazy="tupian(cas.n)" />
            <div class="item-hover">
              <div class="more">
                <span>MORE</span>
              </div>
            </div>
          </router-link>
          <div class="content-list-abstract" :class="{'abstract-active' : index%2!=1}">
            <p class="abstract-title">{{cas.m}}</p>
            <!-- <div v-for="(item, index) in cas.n" :key="index">
              <p class="abstract-content" v-if="item.lx=='文字'">{{item.nr}}</p>              
            </div> -->
            <!-- 当cas.n有数据了再渲染 -->
              <p class="abstract-date">{{cas.s}}</p>
              <!-- <p class="abstract-content" v-if="cas.n[0].lx=='图片'">{{(cas.n[1].nr)}}</p>               -->
              <p class="abstract-content" >{{wenzi(cas.n)}}</p>
          </div>
        </div>
        <!-- <div class="more">飒飒打撒打撒</div> -->
      </div>
    </div>
  </div>
</template>
<script>
import WOW from 'wowjs'
import Banner from "../components/Banner";
export default {
  components: {
    Banner
  },
  data() {
    return {
      caseList: [],
      newcaseList: [] // 筛选过的数据
    };
  },
  watch:{ //异步加载需要定义在watch中
    caseList() {
      this.$nextTick(() => { // 在dom渲染完后,再执行动画
          this.$wow.init()
      })
      // 因为有些数据可能为空对象 不能对空对象进行渲染 所以需要把数据筛选到新数组上
      this.caseList.forEach(element => {
          // console.log( JSON.stringify(element))
          if(JSON.stringify(element)!=="{}"){
            this.newcaseList.push(element)
          }
          // for (var key in element) {
          //   if (element[key] == {}) {
          //     delete element[key];
          //   }
          //   console.log(1);
          // }
      });
      // console.log(this.newcaseList);
    }
  },
  computed:{
    // 计算属性传参可以利用闭包
    wenzi(){
      return function(n){
        let newn=[]
        n.forEach(element => {
          if(element.lx=='文字'){
            newn.push(element)
          }
        });
        if(newn.length==0){
          return ""
        }else{
          return newn[0].nr
        }
      }
    },
    tupian(){
      return function(n){
        let newn=[]
        n.forEach(element => {
          if(element.lx=='图片'){
            newn.push(element)
          }
        });
        // console.log(newn);
        if(newn.length==0){
          // console.log("hhh");
          return ""
        }else{
          return newn[0].nr
        }
      }
    },
  },
  created (){
    this.data()
  },
  methods: {
    // 获取数据
    async data() {
      const { data: res } = await this.$http.get("/data/get",{
        params:{
          view: "系统后台",
          code: "wzxx",
          data: JSON.stringify({fz:2})
        }
      })
      this.caseList = JSON.parse(res.data)
      this.caseList.forEach((element,index) => {
        if(typeof(element)=='string'){
          element=JSON.parse(element)
          this.caseList[index]=element
        }
      });
      // console.log(this.caseList)
    }
  },
  // mounted() {
    
  //   this.$http
  //     // .get("Cases/GetCasesAll")
  //     .get("/data/get",{
  //       params:{
  //         view: "系统后台",
  //         code: "wzxx",
  //         data: JSON.stringify({fz:2})
  //       }
  //     })
  //     .then(response => {
  //       //console.log(response);
  //       this.caseList = JSON.parse(response.data.data)
  //       // console.log(this.caseList)
  //       this.loading = false
  //     })
  //     .catch(function(error) {
  //       window.console.log(error);
  //     });
  // }
};
</script>

 <style lang="scss" scoped>
.case {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  background-color: #f7f8f8;
  .imggoin {
    width: 50%;
    position: relative;
    &:hover {
      // opacity: .7;
      // transition: .5s;
      // opacity: 1;
      // transition: all 0.4s ease-in-out;
      .item-hover {
        opacity: 1;
        transition: all 0.4s ease-in-out;
      }
    }
  }
  &-section {
    width: 100%;
    &-content {
      position: relative;
      width: 90%;
      // min-height: 1000px;
      margin: 0 auto;
      background-color: #fff;
      box-shadow:0px 0px 10px rgb(170, 168, 168);
      &-list {
        position: relative;
        width: 100%;
        height: 500px;
        display: flex;
        justify-content: center;
        align-items: center;
        .interval{
          width: 90%;
          position: absolute;
          top: 10%;
          left: 50%;
          transform: translate(-50%,-50%);
          // .el-divider{
          //   background-color: #000;
          // }
        }
        &:nth-child(even){
          // background-color: rgba($color: #9ed3ff, $alpha: .5);
          // background-image: linear-gradient(to right, rgb(255, 255, 255) , rgb(193, 232, 255));
          // opacity: .5;
        }
        // 图片
        img {
          // width: 612px;
          width: 100%;
          height: 314px;
          // height: 62.6%;
        }
        // 文本
        .content-list-abstract {
          // width: 290px;
          width: 25%;
          // height: 350px;
          height: 70%;
          padding: 0 20px;
          display: flex;
          flex-direction: column;
          justify-content: space-around;
          .abstract-title {
            line-height: 30px;
            font-size: 22px;
            color: #000;
          }
          .abstract-content {
            height: 140px;
            color: #666;
            font-size: 15px;
          .abstract-date{
            font-size: 60px;
          }
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 7;
            -webkit-box-orient: vertical;
            white-space: normal !important;
            word-wrap: break-word;
          }
        }
        .abstract-active {
          order: -1;
        }
      }
    }
  }
}
// 动画hover
.item-hover {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  overflow: hidden;
  background-color: rgba(255, 255, 255, 0.2);
  display: flex;
  .more {
    width: 90px;
    height: 20px;
    padding: 5px 5px;
    margin: 50% auto;
    margin-top: 150px;
    border: 2px solid #fff;
    text-align: center;
    span {
      color: #fff;
      font-size: 20px;
    }
  }
}
</style>